<script setup lang="ts">
import { ref } from "vue";
import { useOrders } from "./utils/hook";
import { PureTableBar } from "@/components/RePureTableBar";
import { useRenderIcon } from "@/components/ReIcon/src/hooks";
import { Delete,Search } from '@element-plus/icons-vue'
import { useI18n } from "vue-i18n";
const { t } = useI18n();
import { useRoute } from 'vue-router'
const route = useRoute()
import Refresh from "@iconify-icons/ep/refresh"
defineOptions({
  name: "OrdersList"
});
import { Location } from '@element-plus/icons-vue'
const formRef = ref();
const tableRef = ref();
const {
  form,expandedRowKeys, loading, columns,stateList,stateList2,
  dataList,salesman_arr ,shop_group_list_arr,
  shopList,setBatchSearch,searchCondList,
  sortChange,selectedNum,onSelectionCancel,expandStatus,
  onSearch,activeStatus,sta_order_statc,
  modal_action,export_data,statistics,
  resetForm, openDialog,
  handleDelete, pagination, handleSizeChange,  handleCurrentChange, handleSelectionChange
} = useOrders(tableRef);
const locationVisible = ref<boolean>(false)

function onFullscreen() { // 重置表格高度
  tableRef.value.setAdaptive();
}
const size = ref("small");
</script>

<template>
  <div class="main">
    <el-form ref="formRef" :inline="true" :size="size" :model="form" class="search-form bg-bg_color w-[99/100] pl-4 pt-[12px] overflow-auto" >
<!--      <el-form-item label="" prop="diy_group">-->
<!--        <el-select v-model="form.diy_group" placeholder="分组" clearable filterable class="!w-[100px]" @change="form.store_id=[]">-->
<!--          <el-option v-for="(item) in shop_group_list_arr" :label="item.name" :value="item.id" :disabled="item.id==''"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
<!--      <el-form-item label="" prop="store_id">-->
<!--        <el-select v-model="form.store_id" :max-collapse-tags="1" collapse-tags popper-class="shop-select-header"-->
<!--          placeholder="选择店铺(多选)" multiple filterable  style="width: 200px;" >-->
<!--          <el-option v-for="(item, index) in shopList.filter(x=>x.group==form.diy_group)" :key="index" :label="item.name" :value="item.id"/>-->
<!--        </el-select>-->
<!--      </el-form-item>-->
      <el-form-item label="" prop="effective_id">
        <el-select v-model="form.effective_id" placeholder="归属业务员" clearable filterable class="!w-[100px]">
          <el-option v-for="(item) in salesman_arr" :label="(item?.site_group[0]>0?(item?.sales_group):(item.dept?.name))+'-'+item.username" :value="item.id" :disabled="item.id==''"/>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="gender">
        <el-select v-model="form.gender"  placeholder="性别"  clearable class="!w-[88px]">
          <el-option label="不限" value="0" />
          <el-option label="男" value="1" />
          <el-option label="女" value="2" />
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="financial_status">
        <el-select v-model="form.state" placeholder="国家" filterable clearable style="width: 80px" >
          <el-option v-for="item in stateList" :key="item" :label="item" :value="item"/>
        </el-select>
       <el-icon @click="locationVisible=true"><Location /></el-icon>
      </el-form-item>

      <el-form-item prop="search">
        <el-input v-model="form.search" style="max-width: 600px; " clearable autosize @dblclick="setBatchSearch" placeholder="可批量查询" class="input-with-select" >
          <template #prepend>
            <el-select v-model="form.search_field" placeholder="选择查询条件"  style="width: 100px">
              <el-option v-for="(item) in searchCondList" :label="'按'+item.name" :value="item.value" :disabled="item.value==''"/>
            </el-select>
          </template>
        </el-input>
      </el-form-item>

      <el-form-item prop="time">
        <el-select v-model="form.search_field2" placeholder="选择时间" class="search_field" style="width: 100px;border-radius:0">
          <el-option label="登录时间" value="login_at" />
          <el-option label="首次付款时间" value="first_pay_at" />
          <el-option label="最近访问时间" value="visit_at" />
          <el-option label="付款时间" value="pay_at" />
          <el-option label="加入时间" value="created_at" />
          <el-option label="最后修改时间" value="updated_at" />
          <el-option label="轮询分配时间" value="poll_time" />
          <el-option label="释放时间" value="release_time" />
        </el-select>
        <el-date-picker
          v-model="form.time" value-format="YYYY-MM-DD" format="YYYY-MM-DD"
          type="daterange" style="width: 200px;border-radius: 0px;border-left: 0;margin-left: -1px;"
          range-separator="~" prefix-icon=""
          start-placeholder="Start date"
          end-placeholder="End date"
        >
        </el-date-picker>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" :icon="useRenderIcon('ri:search-line')" :loading="loading" @click="onSearch"> {{ t("buttons.search") }}</el-button>
        <el-button :icon="useRenderIcon(Refresh)" @click="resetForm(formRef)" style="margin-left:5px;">{{ t("buttons.reset") }}</el-button>
      </el-form-item>
    </el-form>

    <el-dialog v-model="locationVisible" size="small" title="TK国家列表" destroy-on-close class="guojia">
      <el-table size="small" :data="stateList2" style="width: 100%">
        <el-table-column prop="ID" label="缩写" width="180" />
        <el-table-column prop="name" label="国家名" width="180" />
        <el-table-column prop="En" label="英文名" />
      </el-table>
    </el-dialog>
    <PureTableBar :title="t(route.meta.title)"  :isExpandAll="expandStatus"
      :columns="columns" :tableRef="tableRef?.getTableRef()"
      @refresh="onSearch" @fullscreen="onFullscreen">
      <template #title>
        <el-tabs v-model="form.diy_status" class="bg-bg_color  w-[99/100]  pt-[1px] overflow-auto"  style="margin-top:-8px;" @tab-click="onSearch">
          <el-tab-pane :label="'全部客户'" name="0"></el-tab-pane>
<!--          <el-tab-pane :label="'X新分配('+(sta_order_statc.find(x=>x.diy_status=='-1')?.count||0)+')'" name="-1"></el-tab-pane>-->
<!--          <el-tab-pane :label="'X老客户('+(sta_order_statc.find(x=>x.diy_status=='1')?.count||0)+')'" name="1"></el-tab-pane>-->
          <el-tab-pane :label="'弃单客户'" name="2"></el-tab-pane>
          <el-tab-pane :label="'成单客户'" name="3"></el-tab-pane>
          <div >
            <span v-if="selectedNum > 0" style="font-size: var(--el-font-size-base)" class="text-[rgba(42,46,54,0.5)] dark:text-[rgba(220,220,242,0.5)]">
            已选 {{ selectedNum }} 项
          </span>

<!--            <el-tooltip content="请先选择订单" placement="top" :disabled="selectedNum>0" >-->
<!--              <el-button v-perms="'order:btn:allo'" v-if="form.diy_status!=0 &&form.diy_status!=4" type="warning" :disabled="selectedNum<1" @click="modal_action(5)" :size="size">{{ t("buttons.allo") }}</el-button>-->
<!--            </el-tooltip>-->
<!--            <el-button v-perms="'order:btn:daochu'" v-if="dataList.length>0" @click="export_data" :size="size">{{ t("buttons.exportExcel") }}</el-button>-->
          </div>
        </el-tabs>
      </template>
      <template v-slot="{ size, dynamicColumns }">
        <pure-table ref="tableRef"  adaptive  @sort-change="sortChange"
          :adaptiveConfig="{ offsetBottom: 45 }" :expand-row-keys="expandedRowKeys"
                    align-whole="center" row-key="id" showOverflowTooltip table-layout="auto" cell-class-name="copyable-cell"
          :loading="loading" :size="size" :data="dataList"
          :pagination="{ ...pagination, size }" :columns="dynamicColumns"
          :header-cell-style="{ background: 'var(--el-fill-color-light)',color: 'var(--el-text-color-primary)' }"
          :border="true" @selection-change="handleSelectionChange"
          @page-size-change="handleSizeChange"
          @page-current-change="handleCurrentChange"
        >
<!--          <template #expand="{ row }">-->
<!--            <div class="m-3">-->
<!--              <pure-table :data="row.items" :columns="childColumns" :size="size" :border="true"/>-->
<!--            </div>-->
<!--          </template>-->
        </pure-table>
      </template>
    </PureTableBar>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-table__inner-wrapper::before) { height: 0;}
:deep(.search_field .el-select__wrapper) { border-radius: 0;border-right: 0;margin-right: -1px;}
:deep(.el-form--inline .el-form-item) {margin-right: 8px;}
.main-content {margin: 18px 18px 0 !important;}

.search-form {
  :deep(.el-form-item) {
    margin-bottom: 8px;
  }
}
:deep(.el-tabs__header) {margin:0 0 8px;}


/*以下都是异常分类的样式*/
.exceptList .el-button--small{
  clip-path: polygon(
      0px 0%, /* 左上角 */
      100% 0%, /* 右上角 */
      100% 100%, /* 右下角 */
      0px 100%, /* 左下角 */
      6% 50% /* 三角形缺口的顶点 */
  );
  padding-left: 12px;
}
.statistics-panel {
  margin: 10px;
  padding: 10px;
  background-color: #ffffff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.statistic-item {
  text-align: center;
  border: 1px solid #ebeef5;
  border-radius: 4px;
  background-color: #f5f7fa;
  transition: box-shadow 0.3s ease;
}
.statistic-item:hover {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.highlight-item {
  background-color: #409eff;
  border-color: #409eff;
}
.highlight-item .statistic-label {
  color: #ffffff;
}
.highlight-item .statistic-value {
  color: #ffffff;
}

.statistic-value {
  font-size: 11px;display: inline-flex; background-color: #fff;border-radius: 7px;margin-left: 5px; padding: 2px;
  color: #303133;
  font-weight: bold;
}
.shop-select-header {
  .el-checkbox { display: flex;height: unset; }
  .is-closable .el-tag--info{max-width: 140px !important;}
}
.copyable-cell {
  cursor: pointer;
}

.copyable-cell:hover {
  background-color: var(--el-fill-color-light);
}
span.goods_quantity{
  background-color: red !important;
  border-radius: 5px;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  white-space: nowrap;
  border: 1px solid var(--el-bg-color);
}
</style>
